import React, {Component} from 'react';
import {connect} from 'dva';
import {routerRedux} from 'dva/router'
import ReactMarkdown from 'react-markdown';
import {Card,Row,Col,Collapse,Rate,Icon,Button,Radio} from 'antd';
import isArray from 'lodash/isArray';
import isEmpty from 'lodash/isEmpty';
const Panel = Collapse.Panel

import '../../../css/iconfont'
import style from './home.less'

import Loading from '../../../components/common/Loading'



const RetailEducationDetail = ({dispatch,retailEducationDetail,location}) =>{
  if(!isEmpty(retailEducationDetail)){
    const { videoLocation, slidesLocation, title, content } = retailEducationDetail.detail.source;
  	return (
  		<div className={style.retailEducationDetail}>    
        <h1 className={style.title}>{title}</h1>
        {content &&
          <Card
            title='内容'
            bordered={true}
            className={`${style.card} survey`}
            >
            <ReactMarkdown source={content} />
          </Card>
        }
        {videoLocation &&
          <Card
            title='视频'
            bordered={true}
            className={`${style.card} survey`}
            >
              <video src={videoLocation} controls="controls" preload="auto" width="100%" height="600px">
                您的浏览器不支持视频播放。
              </video>
          </Card>
        }
        {slidesLocation &&
          <Card
            title='PDF'
            bordered={true}
            className={`${style.card} survey`}
            >
              <object data={slidesLocation} type="application/pdf" width="100%" height="600px">
                <iframe src={slidesLocation} width="100%" height="100%" style={{ border: 'none' }}>
                  您的浏览器不支持 PDFs. 请下载观看: <a href={slidesLocation}>Download PDF</a>
                </iframe>
              </object>
          </Card>
        }
  		</div>
  	)
  }else{
    if(location.query.trader){
      return <Loading loading={false} />
    }else{
      return <div className={style.msg}>没有指定的用户</div>
    }

  }

}

RetailEducationDetail.propTypes = {
};

export default connect(({retailEducationDetail}) => ({retailEducationDetail}))(RetailEducationDetail);
